package avatar

import "github.com/templui/templui/internal/utils"

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ImageProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Alt        string
	Src        string
}

type FallbackProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ Avatar(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		data-tui-avatar
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Image(props ...ImageProps) {
	{{ var p ImageProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<img
		data-tui-avatar-image
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Src != "" {
			src={ p.Src }
		}
		alt={ p.Alt }
		class={
			utils.TwMerge(
				"aspect-square h-full w-full",
				p.Class,
			),
		}
		{ p.Attributes... }
	/>
}

templ Fallback(props ...FallbackProps) {
	{{ var p FallbackProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<span
		data-tui-avatar-fallback
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex h-full w-full items-center justify-center rounded-full bg-muted",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</span>
}
